import React, { useRef, useState } from 'react';
import { Row } from 'antd';
import './style/add_menu.less';
import { Form, Input, Button, message, TreeSelect } from 'antd';
import { Requests } from '@/utils/requests';
import { observer } from 'mobx-react';
import { MenuDataViewModel, menuDataModel } from '@/layouts/layout_view_model';
import { ApiPath } from '@/config/api_config';
import { Local } from '@/utils/cache';

export default () => {
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };

  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };

  // 获取节点
  const treeSelectRef = useRef(null);
  const menuNameRef = useRef<Input>(null);
  const menuPathRef = useRef<Input>(null);
  const menuIconRef = useRef<Input>(null);

  // SelectTree
  const [selectValue, setSelectValue] = useState<number>();
  // button-loading
  const [loading, setLoading] = useState<boolean>(false);

  // 提交
  const submitInput = async () => {
    const param = {
      parent_id: Number(selectValue ?? -1) ?? '',
      menu_name: menuNameRef.current!.state.value,
      menu_path: menuPathRef.current!.state.value,
      icon: menuIconRef.current?.state.value ?? '',
    };
    Requests.defaults.http('post', ApiPath.addMenu, {
      postData: param,
      header: {
        Authorization: 'Bearer ' + Local.token,
      },
      callBack: {
        callbackList: [
          () => setLoading(true),
          (rsp) => {
            message.success(rsp.data.msg);
            menuDataModel.updateMenuData();
          },
          (rsp) => message.success(rsp.data.msg),
          (e) => message.success('添加失败'),
          () => setLoading(false),
        ],
      },
    });
  };

  const TreeSelectList = observer(
    (menuProps: { menuData: MenuDataViewModel }) => {
      return (
        <TreeSelect
          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
          treeData={menuProps.menuData.treeNode}
          placeholder="请选择所属级别"
          treeDefaultExpandAll
          ref={treeSelectRef}
          value={selectValue}
          onChange={(value) => {
            setSelectValue(value);
          }}
        />
      );
    },
  );

  return (
    <div className="main_div">
      <Row justify="start">
        <Form {...layout} onFinish={submitInput}>
          {/* 下拉框 */}
          <Form.Item label="栏目" name="top_menu">
            <TreeSelectList menuData={menuDataModel} />
          </Form.Item>
          <Form.Item
            label="栏目名字"
            name="menu_name"
            rules={[
              {
                required: true,
                message: '栏目名字必须',
              },
            ]}
          >
            <Input className="inputLen" ref={menuNameRef} />
          </Form.Item>
          <Form.Item
            label="栏目路由"
            name="menu_path"
            rules={[
              {
                required: true,
                message: '栏目路由必须',
              },
            ]}
          >
            <Input className="inputLen" ref={menuPathRef} />
          </Form.Item>
          <Form.Item label="栏目icon" name="menu_icon">
            <Input className="inputLen" ref={menuIconRef} />
          </Form.Item>
          <Form.Item {...tailLayout}>
            <Button
              type="primary"
              htmlType="submit"
              size="large"
              loading={loading}
            >
              保存
            </Button>
          </Form.Item>
        </Form>
      </Row>
    </div>
  );
};
